<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/layui/layui.js"></script>
	<script type="text/javascript">
		/* 注册layui */
		layui.use('layer', function () {
			var layer = layui.layer;
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});
		});

		$(function(){
			new Vue({
				el: "#app",
				data: {
					user:{
						id:"",
						name:"",
						account:"",
						score:"",
						money:"",
						birthday:"",
						head:"",
						gender:"",

					},
					orders:[],
					userId:""

				},
				methods:{
					update(){

						axios.post("http://192.168.6.125:8080/user/update",this.user).then(response=> {
							console.log(this.user);
							if (response.data.code==200) {
								layer.msg("修改成功!");
							}else{
								alert("错误:"+response.data.msg);
							}
						})

					}
				},
				mounted: function () {

					let user = localStorage.getItem("userz"); //查询对应的商品组
					this.user = JSON.parse(user);
					let userId = JSON.parse(localStorage.getItem("userz")).id;
					console.log(userId)
					$("#userid").attr("value", userId)
					axios.post("http://192.168.6.125:8080/user/getUser",this.user).then(response=> {
						if (response.data.code==200) {
							this.user = response.data.data;
							console.log(this.user);
						}else{
							alert("错误:"+response.data.msg);
						}
					})
				}
			});
		})
	</script>
</head>
<body class="bgf5">
<div id="app">

<div class="user-content__box clearfix bgf">
					<div class="title">账户信息-个人资料</div>

					<div class="port b-r50" id="crop-avatar">
						<div class="img"><img :src="user.head" class="cover b-r50"></div>
					</div>

					<form action="" class="user-setting__form" role="form">
						<div class="user-form-group">
							<label>用户名：</label>
							<input type="text"  v-model="user.name" placeholder="请输入用户名" style="border-bottom: solid 1px">
						</div>
						<div class="user-form-group">
							<label>性别：</label>

							<label><input type="radio" name="sex" v-model="user.gender"  value="B"><i class="iconfont icon-radio"></i> 男士</label>
							<label><input type="radio" name="sex" v-model="user.gender"  value="G"><i class="iconfont icon-radio"></i> 女士</label>

							<label><input type="radio" name="sex" v-model="user.gender"  value="S" checked><i class="iconfont icon-radio"></i> 保密</label>
						</div>
						<div class="user-form-group">
							<label>生日：</label>
							<label><input type="text" v-model="user.birthday" id="test1" placeholder="请选择您的出生日期"></label>
						</div>
						<div class="user-form-group">
							<button type="button" @click="update"  class="btn">确认修改</button>
						</div>
					</form>
				</div>
</div>

<!-- 头像选择模态框 -->
<link href="css/cropper/cropper.min.css" rel="stylesheet">
<link href="css/cropper/sitelogo.css" rel="stylesheet">
<script src="js/cropper/cropper.min.js"></script>
<script src="js/cropper/sitelogo.js"></script>
<script>


</script>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<form class="avatar-form" action="user/upload" id="form" enctype="multipart/form-data" method="post">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">Change Logo Picture</h4>
				</div>
				<input type="hidden" id="userid" name="userId" >
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput">图片上传</label>
							<input class="avatar-input" id="avatarInput" name="file" type="file"></div>
						<div class="row">
							<div class="col-md-9">
								<div class="avatar-wrapper"></div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg"></div>
								<div class="avatar-preview preview-md"></div>
								<div class="avatar-preview preview-sm"></div>
							</div>
						</div>
						<div class="row avatar-btns">
							<div class="col-md-9">
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-3">
								<button class="btn btn-success btn-block avatar-save" type="button" id="btnsub"> <i class="fa fa-save"></i> 保存修改</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
	$(function(){
		$("#btnsub").click(function (){

			$("#form").submit();
			$("#avatar-modal").modal("hide");
			window.location.reload();
		})
	})

</script>
</body>
</html>